<template>
	<div class="mui-numbox" data-numbox-min='1' style="height:25px;">
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" :value="initcount" @change='countChanged' ref='numbox' readonly/>
		<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
</template>

<script>
	// 导入mui js文件
	import mui from '../../lib/mui/js/mui.min.js'

	export default {
		mounted() {
			// 初始化数字选择框组件
			mui(".mui-numbox").numbox();
		},
		methods: {
			countChanged() {
				// 数量改变了
				// console.log(this.$refs.numbox.value)
				// 每项商品数量值发生改变时，则立即把最细的数据同步到购物车中，覆盖之前对应每项商品的数量值
				this.$store.commit('updateGoodsInfo', {id: this.goodsid, count: this.$refs.numbox.value})
			}
		},
		props: ["initcount", "goodsid"]
	}
</script>

<style lang="scss" scoped>
	
</style>